<template>
	<view class="tn-flex tn-flex-column">
		<view class="tn-mb-lg">
			<view class="tn-flex gap-2">
				<tn-input v-model="params.start" type="select" right-icon="right" placeholder="请选择开始日期"
					@click="openStartDateTimePicker=true" />
				<tn-input v-model="params.end" type="select" right-icon="right" placeholder="请选择结束日期"
					@click="openEndDateTimePicker=true" />
			</view>
			<view class="tn-flex gap-2 tn-mt">
				<tn-input right-icon="right" v-model="sourceLabel" type="select" placeholder="请选择余额来源"
					@click="openSourcePicker=true" />
				<view class="tn-flex gap-2">
					<tn-button width="120" @click="getBalanceRecord">查询</tn-button>
					<tn-button width="120" type="info" @click="reset">重置</tn-button>
				</view>
			</view>
		</view>
		<loading v-if="isLoading" style="height: 60vh;"></loading>
		<view class="empty" v-else-if="recordList.length==0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<view v-else>
			<view class="tn-radius card_item tn-p-sm tn-w-full" v-for="item in recordList" :key="item.id">
				<view class="tn-flex items-center justify-between">
					<view class="tn-flex items-center">
						<tn-title :title="item.source_text" mode="hLine" assist-color="tn-blue" size="lg" />
						<tn-icon name="pushpin-fill" type="primary" class="tn-ml-xs" offset-top="-2rpx" />
					</view>
				</view>
				<view class="tn-flex tn-flex-column justify-around tn-mt-sm">
					<text class="tn-mt-xs">
						<text>收支类型：</text>
						<text class="tn-text-sm">{{item.type_text}}</text>
					</text>
					<text class="tn-mt-xs">
						<text>收支金额：</text>
						<text class="tn-text-sm">{{item.price}} 元</text>
					</text>
					<text class="tn-mt-xs">
						<text>备注信息：</text>
						<text class="tn-text-sm">{{item.remark}}</text>
					</text>
				</view>
				<view class="tn-flex justify-between items-center tn-pt-sm tn-mt-sm tn-border-top tn-gray-light_border">
					<text class="tn-text-xs tn-type-info_text">{{item.add_time}}</text>
					<text class="tn-mr-xs tn-text-xs tn-type-info_text">余额：{{item.balance}} 元</text>
				</view>
			</view>
			<view class="tn-pt-sm tn-pb-sm tn-flex-center">
				<uni-pagination :total="total" :current="params.page" :pageSize="params.limit" @change="changePage" />
			</view>
		</view>
	</view>
	<tn-modal ref="modalRef" />
	<tn-date-time-picker v-model="params.start" v-model:open="openStartDateTimePicker" format="YYYY-MM-DD"
		:init-current-date-time="false" />
	<tn-date-time-picker v-model="params.end" v-model:open="openEndDateTimePicker" format="YYYY-MM-DD"
		:init-current-date-time="false" />
	<tn-picker v-model="params.source" v-model:open="openSourcePicker" :data="pickerSourceData"
		@confirm="confirmPicker" />
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import {
		getBalanceRecordApi,
	} from "@/request/worktop/merchant.js"

	onMounted(() => {
		getBalanceRecord()
	})

	const props = defineProps(['userId'])

	const isLoading = ref(true)

	const openStartDateTimePicker = ref(false)
	const openEndDateTimePicker = ref(false)

	const openSourcePicker = ref(false)
	const pickerSourceData = [{
		label: '卖券的佣金',
		value: 1
	}, {
		label: '结算申请冻结',
		value: 3
	}, {
		label: '结算拒绝退还',
		value: 4
	}, {
		label: '结算通过扣除',
		value: 5
	}, ]
	const sourceLabel = ref('')

	const modalRef = ref()
	const formRef = ref()
	const recordList = ref([])
	const params = ref({
		seller_id: props.userId,
		page: 1,
		limit: 10,
		source: 0,
		start: '',
		end: '',
	})
	const total = ref(0)

	// 规则
	const formRules = {
		cycle_value: [{
			required: true,
			message: '请输入账期',
			trigger: ['change', 'blur']
		}],
		cycle_name: [{
			required: true,
			message: '请输入周期名称',
			trigger: ['change', 'blur']
		}],
		cycle_desc: [{
			required: true,
			message: '请输入周期描述',
			trigger: ['change', 'blur']
		}],
		cycle_rate: [{
			required: true,
			message: '请输入周期比例',
			trigger: ['change', 'blur']
		}, {
			pattern: /^([1-9]\d?|100)$/,
			message: '请输入1-100之间的正整数',
			trigger: ['change', 'blur']
		}],
	}

	// 获取余额记录列表
	const getBalanceRecord = () => {
		isLoading.value = true
		getBalanceRecordApi(params.value).then(res => {
			if (res.code == 0) {
				recordList.value = res.data
				total.value = res.other.total
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		}).finally(() => {
			setTimeout(() => {
				isLoading.value = false
			}, 500)
		})
	}
	// 确定选择来源
	const confirmPicker = (_, item) => {
		sourceLabel.value = item.label
	}
	// 重置按钮
	const reset = () => {
		sourceLabel.value = ''
		params.value.source = 0
		params.value.start = ''
		params.value.end = ''
		getBalanceRecord()
	}
	// 更新页码
	const changePage = (e) => {
		params.value.page = e.current
		getBalanceRecord()
	}
</script>

<style scoped lang="scss">
</style>